<template>
  <span class="arrow"> </span>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  color: {
    type: String,
    default: "white",
  },
});
</script>
<style lang="scss" scoped>
.arrow {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: v-bind(color);
}

.arrow:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid v-bind(color);
}
</style>
